<!-- 结算单查看 -->
<template>
  <div class="billing-list-dialog">
    <el-dialog
      width="900px"
      class=""
      top="6vh"
      title="结算单查看"
      :visible="$store.state.dialog.billingList"
      @close="close">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <el-form :model="order" res="order" label-width="5px" size="mini">
              <el-row>
                <el-col :span="4">
                  <el-form-item>
                    <el-select size="mini" v-model="order.settlementState">
                      <el-option label="未结清" value="0"></el-option>
                      <el-option label="全部" value="1"></el-option>
                      <el-option label="产生结算" value="2"></el-option>
                      <el-option label="结清" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item>
                    <el-select size="mini" @change="changeList" v-model="order.myType">
                      <el-option label="按月查" value="0"></el-option>
                      <el-option label="按年查" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-if="order.myType === '0'" :span="4">
                  <el-form-item>
                    <el-date-picker
                      v-model="order.startTime"
                      type="month"
                      style="width: 110px;"
                      value-format="yyyy-MM"
                      placeholder="开始月份">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col v-if="order.myType === '0'" :span="1">
                  <span style="line-height: 30px;">至</span>
                </el-col>
                <el-col v-if="order.myType === '0'" :span="4">
                  <el-form-item>
                    <el-date-picker
                      v-model="order.endTime"
                      style="width: 110px;"
                      type="month"
                      value-format="yyyy-MM"
                      placeholder="结束月份">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col v-if="order.myType === '1'" :span="4">
                  <el-form-item>
                    <el-date-picker
                      style="width: 110px;"
                      v-model="order.startTime"
                      type="year"
                      value-format="yyyy"
                      placeholder="开始年份">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col v-if="order.myType === '1'" :span="1">
                  <span style="line-height: 30px;">至</span>
                </el-col>
                <el-col v-if="order.myType === '1'" :span="4">
                  <el-form-item>
                    <el-date-picker
                      style="width: 110px;"
                      v-model="order.endTime"
                      type="year"
                      value-format="yyyy"
                      placeholder="结束年份">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-button type="primary" size="mini" @click="settlementBill()">查询</el-button>
                </el-col>
                <el-col :span="5">
                  <el-form-item>
                    <el-input v-model="order.searchCon" @input="settlementBill" placeholder="搜索"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-table
              border
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.5)"
              max-height="600px"
              :data="fallbackData"
              style="width: 100%">
              <el-table-column
                align="center"
                width="110"
                prop="CompanyName"
                label="用箱人">
              </el-table-column>
              <el-table-column
                align="center"
                width="110"
                prop="createTime"
                label="结算日期">
              </el-table-column>
              <el-table-column
                align="center"
                prop="startTime"
                width="100"
                label="开始日期">
              </el-table-column>
              <el-table-column
                align="center"
                prop="endTime"
                width="100"
                label="结束日期">
              </el-table-column>
              <el-table-column
                align="center"
                prop="ysMoney"
                label="应收金额">
              </el-table-column>
              <el-table-column
                align="center"
                prop="ssMoney"
                label="实收金额">
              </el-table-column>
              <el-table-column
                align="center"
                label="状态">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.state === '0'" size="medium" effect="dark">未结清</el-tag>
                  <el-tag v-if="scope.row.state === '1'" size="medium" effect="dark">全部</el-tag>
                  <el-tag v-if="scope.row.state === '2'" size="medium" effect="dark">产生结算</el-tag>
                  <el-tag v-if="scope.row.state === '3'" size="medium" effect="dark">结清</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  settlementBill
} from '../../api/finance'
export default {
  data () {
    return {
      order: {
        settlementState: '0',
        myType: '0',
        startTime: '',
        endTime: '',
        searchCon: '' // 搜索
      },
      loading: false,
      fallbackData: []
    }
  },
  methods: {
    close () {
      this.$store.commit('hide_billing_list_dialog')
    },
    changeList () {
      this.order.startTime = ''
      this.order.endTime = ''
    },
    // 结算单查看
    async settlementBill () {
      const res = await settlementBill({
        settlementState: this.order.settlementState, // 结算状态 0 未结清 1 全部 2 产生结算 3 结清
        searchCon: this.order.searchCon, // 搜索条件
        myType: this.order.myType, // 0按月查 1 按年查
        startTime: this.order.startTime || '', // 开始时间
        endTime: this.order.endTime || '' // 结束时间
      })
      if (res.status === 200) {
        this.fallbackData = res.data
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
